/**
 * 查询组件
 * by wangjianjun
 * create 2021.09.17
 */
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col } from 'antd';
import _ from 'lodash';
import {
  DATA_ENTRY,
  FormGroupLayout4,
  FormGroupLayout41,
  FormGroupLayout3_extra,
  FormGroupLayout3,
  FormGroupLayout31,
  FormGroupLayout2,
  FormGroupLayout21,
  FormItemLayout_oneLine_baseParent_one,
  FormItemLayout_oneLine_baseParent_two,
  FormItemLayout_oneLine_baseParent_three,
  FormItemLayout_oneLine_baseParent_four,
  FormItemLayout_oneLine_baseParent_six,
  FormItemLayout_oneLine_baseParent_five,
} from '../form';
import FormItems from '../AdvancedSearch/formItems';
import styles from './style.less';

let layout = null;
let layoutOneRow = null;
let showLableWrap = {};

/**
 * 每一项最小宽度为312px3
 * 一行最多4项
 * 当组件宽度小于4*312=1248px时，自动换行
 * 当组件宽度大于1248px时，展示4项，自动扩充
 */

class FormGroup extends Component {
  // props默认值
  static defaultProps = {
    dataSource: [], // 查询条件数据源
    resultIncludeNull: false, // 默认在getFormGroupData事件中将未设置条件移除
    autoLayout: true, // 默认自动布局
    lineOne: false, // 自定义一行一个
    onRef: () => {}, // 本组件的引用
    rowNumber: null, // 在非自动布局时，需设置该值，默认自动布局，无需取该值
    _self: null, // 父元素
  };

  state = {
    fieldInRow: 4, // 默认一行展示四个元素
  };

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);
    // 添加窗口大小的监听
    const dom = ReactDOM.findDOMNode(this);
    this.setState({
      _self: dom,
    });
    window.addEventListener('resize', this.windowChange);
    this.windowChange();
  }

  componentWillUnmount() {
    // 删除窗口大小的监听
    window.removeEventListener('resize', this.windowChange);
  }

  // 窗口大小变更触发
  windowChange = () => {
    const screenWidth = document.documentElement.clientWidth;
    if (screenWidth < 1920) {
      this.setState({
        fieldInRow: 3,
      });
    } else {
      this.setState({
        fieldInRow: 4,
      });
    }
  };

  // 根据分辨率判断是否需要title自动换行
  autoWrap = (titleLength, helper = false, required) => {
    if (!titleLength) return false;

    const screenWidth = document.documentElement.clientWidth;
    if (screenWidth < 1700 && titleLength > 11) return true;
    if (screenWidth >= 1700 && screenWidth < 1800 && titleLength > 12) return true;
    if (screenWidth >= 1800 && screenWidth < 1900 && titleLength > 13) return true;
    if (screenWidth >= 1900 && screenWidth < 1920 && titleLength > 13) return true;

    if (screenWidth >= 1920 && screenWidth < 2100 && titleLength > 9) return true;
    if (screenWidth >= 2100 && screenWidth < 2300 && titleLength > 10) return true;
    if (screenWidth >= 2300 && screenWidth < 2500 && titleLength > 11) return true;
    if (screenWidth >= 2500 && titleLength > 12) return true;
    if (helper) {
      // if(screenWidth == 1920 && titleLength == 8 && !required) return false;
      if (screenWidth < 1320 && titleLength > 7 && required) return true;
      if (screenWidth < 1700 && titleLength > 8) return true;
      if (screenWidth >= 1700 && screenWidth < 1800 && titleLength > 8) return true;
      if (screenWidth >= 1800 && screenWidth < 1900 && titleLength > 9) return true;
      if (screenWidth >= 1900 && screenWidth < 1920 && titleLength > 10) return true;
      if (screenWidth >= 1920 && screenWidth < 2100 && titleLength == 8 && !required) return false;
      if (screenWidth >= 1920 && screenWidth < 2100 && titleLength > 7) return true;
      if (screenWidth >= 2100 && screenWidth < 2300 && titleLength > 8) return true;
      if (screenWidth >= 2300 && screenWidth < 2500 && titleLength > 9) return true;
      if (screenWidth >= 2500 && screenWidth < 2600 && titleLength > 10) return true;
      if (screenWidth >= 2600 && titleLength > 11) return true;
    }
    return false;
  };
  baseParentAutoWrap = (titleLength, item, fontSize, helper = false, sortSpan) => {
    //flag为true的时候 说明是一排几个中是几个类似12 8这种的值
    //flag为false的话 说明都是单独的占据一行的值 或者是8-8-8  12-12这种类型的值
    //如果是true的情况下  分为几种分辨率进行调整
    if (this.state._self) {
      const _self = this.props.widthSet ? this.props.widthSet : this.state._self.offsetWidth;
      if (_self >= 1600) {
        return this.spanWrapCal(sortSpan, FormItemLayout_oneLine_baseParent_six, _self, fontSize, titleLength, item, helper);
      } else if (_self < 1600 && _self >= 1200) {
        //1337的开始试了下
        return this.spanWrapCal(sortSpan, FormItemLayout_oneLine_baseParent_three, _self, fontSize, titleLength, item, helper);
      } else if (_self < 1200 && _self >= 992) {
        return this.spanWrapCal(sortSpan, FormItemLayout_oneLine_baseParent_one, _self, fontSize, titleLength, item, helper);
      } else if (_self < 992 && _self >= 768) {
        return this.spanWrapCal(sortSpan, FormItemLayout_oneLine_baseParent_two, _self, fontSize, titleLength, item, helper);
      } else if (_self < 768 && _self >= 576) {
        return this.spanWrapCal(sortSpan, FormItemLayout_oneLine_baseParent_four, _self, fontSize, titleLength, item, helper);
      } else if (_self < 576) {
        return this.spanWrapCal(sortSpan, FormItemLayout_oneLine_baseParent_five, _self, fontSize, titleLength, item, helper);
      }
    }
  };
  //根据父元素的宽度col的span 动态获取宽度，并且如果是一行占几个单独的话 可以直接走24的样式
  spanWrapCal = (sortSpan, spanWrap, _self, fontSize, titleLength, item, helper) => {
    const { rowNumber } = this.props;
    const screenWidth = document.documentElement.clientWidth;
    if (sortSpan == 24) {
      layoutOneRow = spanWrap;
      return this.screenWidthGet(layoutOneRow, screenWidth, _self, fontSize, titleLength, item, helper);
    } else {
      if (sortSpan == 8) {
        if (item.type == DATA_ENTRY.ADDRESSC || item.type == DATA_ENTRY.PRODUCTGROUPSEP || item.type == DATA_ENTRY.TENANTDEPARTMENT || item.type == DATA_ENTRY.SERIESPRODUCTGROUP) {
          //此时是地址
          if (item.controlLabelSpan) {
            //小于8的时候走8
            layout = this.spanColBase(item.controlLabelSpan);
          } else {
            layout = this.spanColBase((24 / (item.span / 2)) * 4);
          }
        } else {
          if (item.type == DATA_ENTRY.COMPLEXDATE) {
            if (item.controlLabelSpan) {
              layout = this.spanColBase(item.controlLabelSpan);
            } else {
              layout = this.spanColBase((24 / (item.span || 12)) * 8);
            }
          } else {
            if (item.controlLabelSpan) {
              layout = this.spanColBase(item.controlLabelSpan);
            } else {
              layout = this.spanColBase((24 / (item.span || 12)) * 4);
            }
          }
        }
      } else if (sortSpan == 12) {
        if (item.type == DATA_ENTRY.ADDRESSC || item.type == DATA_ENTRY.PRODUCTGROUPSEP || item.type == DATA_ENTRY.TENANTDEPARTMENT || item.type == DATA_ENTRY.SERIESPRODUCTGROUP) {
          //此时是地址
          if (item.controlLabelSpan) {
            layout = this.spanColBase(item.controlLabelSpan);
          } else {
            layout = this.spanColBase((24 / 12) * 4);
          }
        } else {
          if (item.type == DATA_ENTRY.COMPLEXDATE) {
            if (item.controlLabelSpan) {
              layout = this.spanColBase(item.controlLabelSpan);
            } else {
              layout = this.spanColBase((24 / (item.span || 12)) * 8);
            }
          } else {
            if (item.controlLabelSpan) {
              layout = this.spanColBase(item.controlLabelSpan);
            } else {
              layout = this.spanColBase((24 / (item.span || 12)) * 4);
            }
          }
        }
      }
      return this.screenWidthGet(layout, screenWidth, _self, fontSize, titleLength, item, helper);
    }
  };
  //计算span后的赋值
  spanColBase = (labelCols) => {
    return {
      labelCol: {
        xs: { span: labelCols, offset: 0 },
        sm: { span: labelCols, offset: 0 },
        md: { span: labelCols, offset: 0 },
        lg: { span: labelCols, offset: 0 },
        xl: { span: labelCols, offset: 0 },
        xxl: { span: labelCols, offset: 0 },
      },
      wrapperCol: {
        xs: { span: 24 - labelCols, offset: 0 },
        sm: { span: 24 - labelCols, offset: 0 },
        md: { span: 24 - labelCols, offset: 0 },
        lg: { span: 24 - labelCols, offset: 0 },
        xl: { span: 24 - labelCols, offset: 0 },
        xxl: { span: 24 - labelCols, offset: 0 },
      },
    };
  };
  //根据不同的分辨率拿span等分
  screenWidthGet = (spanWrap, screenWidth, _self, fontSize, titleLength, item, helper) => {
    if (screenWidth < 576) {
      //此时xs
      return this.handleWrap(spanWrap.labelCol.xs.span, _self, fontSize, titleLength, item, helper);
    } else if (screenWidth >= 576 && screenWidth < 768) {
      //此时sm
      return this.handleWrap(spanWrap.labelCol.sm.span, _self, fontSize, titleLength, item, helper);
    } else if (screenWidth >= 768 && screenWidth < 992) {
      //此时是md
      return this.handleWrap(spanWrap.labelCol.md.span, _self, fontSize, titleLength, item, helper);
    } else if (screenWidth >= 992 && screenWidth < 1200) {
      //此时是lg
      return this.handleWrap(spanWrap.labelCol.lg.span, _self, fontSize, titleLength, item, helper);
    } else if (screenWidth >= 1200 && screenWidth < 1600) {
      //此时是xl
      return this.handleWrap(spanWrap.labelCol.xl.span, _self, fontSize, titleLength, item, helper);
    } else {
      //此时是xxl
      return this.handleWrap(spanWrap.labelCol.xxl.span, _self, fontSize, titleLength, item, helper);
    }
  };
  //根据等分确定是否需要换行
  handleWrap = (span, _self, fontSize, titleLength, item, helper) => {
    const { rowNumber } = this.props;
    let strCount = 0; //如果只有一个title值的时候
    let strCount2 = 0; //如果有两个值的时候
    showLableWrap = {
      firstTitle: false,
      secondTitle: false,
    };

    if (item.type == DATA_ENTRY.TRADINGDIRECT) {
      //交易方向
      if (!item.title) {
        item.title = '交易方向';
      }
    } else if (item.type == DATA_ENTRY.TRADINGTYPE) {
      //交易类型
      if (!item.title) {
        item.title = '交易类型';
      }
    }
    if (item?.title && !Array.isArray(item.title)) {
      for (var i = 0; i < item.title.length; i++) {
        if (item.title.charCodeAt(i) > 255) {
          //此时是中文
          strCount += fontSize;
        } else {
          //此时是英文 abcd等  若是遇到特殊字符另外再加
          strCount += 8;
        }
      }
    }
    //如果产品组合的组件后期文字更改过多，可以到时候更改判断
    if (item?.title && Array.isArray(item.title)) {
      if (item.title.length) {
        let datas = item.title[0];
        let datasTwo = item.title[1];
        for (let i = 0; i < datas.length; i++) {
          if (datas.charCodeAt(i) > 255) {
            //此时是中文
            strCount += fontSize;
          } else {
            //此时是英文 abcd等  若是遇到特殊字符另外再加
            strCount += 8;
          }
        }
        for (let j = 0; j < datasTwo.length; j++) {
          if (datasTwo.charCodeAt(j) > 255) {
            //此时是中文
            strCount2 += fontSize;
          } else {
            //此时是英文 abcd等  若是遇到特殊字符另外再加
            strCount2 += 8;
          }
        }
      }
    }

    let spanWidth = 0;
    if (rowNumber) {
      spanWidth = (span / 24) * ((_self - 20) / rowNumber);
    } else {
      if (item.title && Array.isArray(item.title)) {
        spanWidth = (_self - 20) * (item?.span / 2 / 24) * (span / 24);
      } else {
        if (item.type == 'complexDate') {
          //针对日期期间的处理
          spanWidth = (_self - 20) * (item?.span / 2 / 24) * (span / 24);
        } else {
          spanWidth = (_self - 20) * (item?.span / 24) * (span / 24);
        }
      }
    }
    //看是否是必填项
    if (item.rules && item.rules.length && item.rules.find((item) => item.required)) {
      strCount = strCount + 11;
    }
    //看是否有问号图标
    if (helper) {
      strCount = strCount + 20;
    }
    //如果是单个title  如果是多个title
    if (item?.title && !Array.isArray(item.title)) {
      if (spanWidth - strCount < 0) {
        showLableWrap.firstTitle = true;
      } else {
        showLableWrap.firstTitle = false;
      }
      return showLableWrap;
    }
    if (item?.title && Array.isArray(item.title)) {
      if (spanWidth - strCount < 0) {
        //第一个需要换行
        showLableWrap.firstTitle = true;
      } else {
        showLableWrap.firstTitle = false;
      }
      if (spanWidth - strCount2 < 0) {
        showLableWrap.secondTitle = true;
      } else {
        showLableWrap.secondTitle = false;
      }
      return showLableWrap;
    }
  };
  // 生成查询条件，一行为四个
  getFields4() {
    const { dataSource } = this.props;
    const children = [];
    // 遍历数组，将数据转换成可展示的html
    dataSource.forEach((item, index) => {
      let autoWrap = this.autoWrap(item.title && item.title.length, !!item.helper, item.rules && item.rules.length && item.rules.find((item) => item.required)); // 获取是否需要自动换行
      item.labalWrap = autoWrap;

      switch (item.type) {
        case DATA_ENTRY.COMPLEXDATE: // 当组件类型为COMPLEXDATE，需要特殊处理占位
        case DATA_ENTRY.ADDRESSC: // 当组件类型为ADDRESS，需要特殊处理占位
          children.push(
            <Col span={12} key={index}>
              {/* 该处 this.props.form 不是从父组件传入，而是通过Form.create()传入 */}
              <FormItems
                {...item}
                form={this.props.form}
                formItemLayout={item.lineOne ? FormGroupLayout41 : FormGroupLayout4}
                extraLayout={item.lineOne ? FormGroupLayout41 : FormGroupLayout4}
              />
            </Col>,
          );
          break;
        case DATA_ENTRY.PRODUCTGROUPSEP: // 当组件类型为产品+组合，需要特殊处理占位
          children.push(
            <Col span={12} key={index}>
              {/* 该处 this.props.form 不是从父组件传入，而是通过Form.create()传入 */}
              <FormItems {...item} form={this.props.form} formItemLayout={FormGroupLayout4} extraLayout={FormGroupLayout4} />
            </Col>,
          );
          break;
        default:
          if (!item.hide) {
            children.push(
              <Col span={item.lineOne ? 24 : 6} key={index}>
                <FormItems
                  {...item}
                  form={this.props.form}
                  formItemLayout={item.lineOne ? FormGroupLayout41 : FormGroupLayout4}
                  extraLayout={item.lineOne ? FormGroupLayout41 : FormGroupLayout4}
                />
              </Col>,
            );
          }
      }
    });

    return children;
  }

  // 生成查询条件，一行为三个
  getFields3() {
    const { dataSource, extraContent } = this.props;
    const children = [];

    // 遍历数组，将数据转换成可展示的html
    dataSource.forEach((item, index) => {
      let autoWrap = this.autoWrap(item.title && item.title.length, !!item.helper, item.rules && item.rules.length && item.rules.find((item) => item.required)); // 获取是否需要自动换行
      item.labalWrap = autoWrap;

      switch (item.type) {
        case DATA_ENTRY.COMPLEXDATE: // 当组件类型为COMPLEXDATE，需要特殊处理占位
        case DATA_ENTRY.ADDRESSC: // 当组件类型为ADDRESS，需要特殊处理占位
          children.push(
            <Col span={16} key={index}>
              {/* 该处 this.props.form 不是从父组件传入，而是通过Form.create()传入 */}
              <FormItems
                {...item}
                form={this.props.form}
                formItemLayout={item.lineOne ? FormGroupLayout31 : extraContent ? FormGroupLayout3_extra : FormGroupLayout3}
                extraLayout={item.lineOne ? FormGroupLayout31 : extraContent ? FormGroupLayout3_extra : FormGroupLayout3}
              />
            </Col>,
          );
          break;
        case DATA_ENTRY.PRODUCTGROUPSEP: // 当组件类型为产品+组合，需要特殊处理占位
          children.push(
            <Col span={16} key={index}>
              {/* 该处 this.props.form 不是从父组件传入，而是通过Form.create()传入 */}
              {extraContent ? (
                <FormItems {...item} form={this.props.form} formItemLayout={FormGroupLayout3_extra} extraLayout={FormGroupLayout3_extra} />
              ) : (
                <FormItems {...item} form={this.props.form} formItemLayout={FormGroupLayout3} extraLayout={FormGroupLayout3} />
              )}
            </Col>,
          );
          break;
        default:
          if (!item.hide) {
            children.push(
              // 若某一元素占位一整行，则更换layout设置，保证对齐
              <Col span={item.lineOne ? 24 : 8} key={index}>
                <FormItems
                  {...item}
                  form={this.props.form}
                  formItemLayout={item.lineOne ? FormGroupLayout31 : extraContent ? FormGroupLayout3_extra : FormGroupLayout3}
                  extraLayout={item.lineOne ? FormGroupLayout31 : extraContent ? FormGroupLayout3_extra : FormGroupLayout3}
                />
              </Col>,
            );
          }
      }
    });

    return children;
  }

  // 用户自定义布局,默认一排俩个
  getFields() {
    const { dataSource, rowNumber, rowNumberBase } = this.props;
    // const dataSource_ = dataSource ? JSON.parse(JSON.stringify(dataSource)):[];
    const children = [];
    let sortSpanArr = [];
    let sorterSpan = 12;
    // 遍历数组，将数据转换成可展示的html
    // console.log(dataSource,'数据')
    if (dataSource?.length) {
      for (var i = 0; i < dataSource.length; i++) {
        if (dataSource[i] && dataSource[i].span) {
          sortSpanArr.push(dataSource[i]?.span);
        }
      }
    }
    // 遍历数组，将数据转换成可展示的html
    dataSource.forEach((item, index) => {
      // 超过8个字需要换行
      // if(item.title && item.title.length > 10){
      //   item.labalWrap = true;
      // }
      //自定义布局的多少字换换行也是要自定义
      layout = FormGroupLayout3;
      layoutOneRow = FormGroupLayout31;
      // if(rowNumber == 2){
      //    layout = FormGroupLayout2;
      //    layoutOneRow = FormGroupLayout21;
      // }
      //获取根据父元素 是否需要换行  一排一行  一排两行 一排三行  一排四行  (这个是为了再分辨率的基本上 再进行二次加工)
      sortSpanArr.sort(function (a, b) {
        return a - b;
      });
      if (sortSpanArr?.length) {
        sorterSpan = sortSpanArr[0] > 8 ? (sortSpanArr[0] == 24 ? sortSpanArr[0] : 12) : 8;
      } else {
        if (rowNumber) {
          sorterSpan = 24 / rowNumber;
          if (
            item.type == DATA_ENTRY.ADDRESSC ||
            item.type == DATA_ENTRY.PRODUCTGROUPSEP ||
            item.type == DATA_ENTRY.TENANTDEPARTMENT ||
            item.type == DATA_ENTRY.SERIESPRODUCTGROUP
          ) {
            item.span = sorterSpan * 2;
          } else {
            item.span = sorterSpan;
          }
        }
      }
      let baseParentAutoWrap = this.baseParentAutoWrap(item.title && item.title.length, item, 14, !!item.helper, sorterSpan);
      item.labalWrap = baseParentAutoWrap?.firstTitle;
      item.labelWrapTwo = baseParentAutoWrap?.secondTitle;

      switch (item.type) {
        case DATA_ENTRY.COMPLEXDATE: // 当组件类型为COMPLEXDATE,并且一行排列2个时,要特殊处理
        case DATA_ENTRY.ADDRESSC: // 当组件类型为ADDRESS，并且一行排列2个时,要特殊处理
        case DATA_ENTRY.PRODUCTGROUPSEP: // 当组件类型为产品+组合，并且一行排列2个时,要特殊处理
          if (!item.hide) {
            if (sorterSpan == 24) {
              children.push(
                <Col span={24} key={index}>
                  <FormItems
                    formItemLayout={item.formItemLayoutDefine ? item.formItemLayoutDefine : layoutOneRow}
                    extraLayout={item.formItemLayoutDefine ? item.formItemLayoutDefine : layoutOneRow}
                    {...item}
                    form={this.props.form}
                  />
                </Col>,
              );
            } else {
              children.push(
                <Col span={item.span || 12} key={index}>
                  <FormItems
                    formItemLayout={item.formItemLayoutDefine ? item.formItemLayoutDefine : sorterSpan == 24 ? (rowNumber == 2 ? layout : layoutOneRow) : layout}
                    extraLayout={item.formItemLayoutDefine ? item.formItemLayoutDefine : sorterSpan == 24 ? (rowNumber == 2 ? layout : layoutOneRow) : layout}
                    {...item}
                    form={this.props.form}
                  />
                </Col>,
              );
            }
          }
          break;
        default:
          if (!item.hide) {
            if (sorterSpan == 24) {
              children.push(
                <Col span={24} key={index}>
                  <FormItems
                    formItemLayout={item.formItemLayoutDefine ? item.formItemLayoutDefine : item.extraContent ? FormGroupLayout3_extra : layoutOneRow}
                    extraLayout={item.formItemLayoutDefine ? item.formItemLayoutDefine : item.extraContent ? FormGroupLayout3_extra : layoutOneRow}
                    {...item}
                    form={this.props.form}
                  />
                </Col>,
              );
            } else {
              children.push(
                <Col span={item.span || 12} key={index}>
                  <FormItems
                    formItemLayout={
                      item.formItemLayoutDefine
                        ? item.formItemLayoutDefine
                        : sorterSpan == 24
                        ? item.extraContent
                          ? FormGroupLayout3_extra
                          : layoutOneRow
                        : item.extraContent
                        ? FormGroupLayout3_extra
                        : layout
                    }
                    extraLayout={
                      item.formItemLayoutDefine
                        ? item.formItemLayoutDefine
                        : sorterSpan == 24
                        ? item.extraContent
                          ? FormGroupLayout3_extra
                          : layoutOneRow
                        : item.extraContent
                        ? FormGroupLayout3_extra
                        : layout
                    }
                    {...item}
                    form={this.props.form}
                  />
                </Col>,
              );
            }
          }
      }
    });

    return children;
  }
  getFieldValue = (e) => {
    return this.props.form.getFieldValue(e);
  };
  // 外部组件调用，获取form数据
  getFormGroupData = (e) => {
    // e.preventDefault();
    let data = {};
    this.props.form.validateFields((err, values) => {
      if (err) return;

      if (!this.props.resultIncludeNull) {
        // 删除用户未设置的条件
        const removeKeys = []; // 保存要删除的条件key值
        Object.getOwnPropertyNames(values).forEach((key) => {
          const value = values[key];
          if (value === undefined || value === null || value === '' || (Array.isArray(value) && value.length == 0)) {
            removeKeys.push(key); // 找出未设置的条件
          }
        });
        // 删除空条件
        for (let i = 0; i < removeKeys.length; i++) {
          delete values[removeKeys[i]];
        }
      }

      const { dataSource } = this.props;
      // 遍历数组，找出是否有证券代码类型的组件
      dataSource.forEach((item, index) => {
        if (item.type === DATA_ENTRY.SECURITIESCODE) {
          // 若证券代码的值不为空，则从中解析出交易市场和证券代码
          let securitiesValue = values[item.dataIndex];

          if (securitiesValue) {
            if (item.multiple == true) {
              values[item.dataIndex] = securitiesValue;
            } else {
              values.exchangeCode = securitiesValue.split('-')[0];
              values[item.dataIndex] = securitiesValue.split('-')[1];
            }
          }
        }
      });

      data = values;
    });

    let result = Object.values(data).length > 0 ? data : null;
    return result;
  };

  render() {
    const { autoLayout } = this.props;
    return (
      <Form className={styles.query} style={this.props.style}>
        {autoLayout && <Row justify='space-around'>{this.state.fieldInRow == 4 ? this.getFields4() : this.getFields3()}</Row>}
        {!autoLayout && <Row justify='space-around'>{this.getFields()}</Row>}
      </Form>
    );
  }
}

// props类型
FormGroup.propsTypes = {
  style: PropTypes.object, // 自定义样式
  lineOne: PropTypes.bool, // 自定义一行一个(自动布局的前提下)
  autoLayout: PropTypes.bool, // 自动布局
  dataSource: PropTypes.array, // form表单条件数据源
  resultIncludeNull: PropTypes.bool, // 设置onQuery事件抛出的结果是否包含未设置的
  onRef: PropTypes.func, // 本组件的引用
  rowNumber: PropTypes.number, // 非自动布局下，设置一行展示几个元素
};

export default Form.create()(FormGroup);
